<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>发表文章</title>
		<link rel="stylesheet" href="../content/PublishCss.css">
	</head>
	<body>

		<ul id="View_Publish_Main">
			<li class="title">
				<input type="text" placeholder="标题" v-model="title" maxlength="50" />
			</li>
			<li class="permissions">
				<div @click="IsPublicClick" :class="IsPublic?'IsPublicCheck IsPublicTrue':'IsPublicCheck IsPublicFalse'">
					<span></span>
					<span>公开发布</span>
				</div>
				<div @click="IsCommentClick" :class="IsComment?'IsPublicCheck IsPublicTrue':'IsPublicCheck IsPublicFalse'">
					<span></span>
					<span>允许评论</span>
				</div>
				<div :class="Classification==-1?'selectList':'selectListTrue'">
					<input type="text" readonly="readonly" placeholder="点击分类" v-model="ClassificationText" @blur="ClassificationBlue"
					 @focus="ClassificationFocus" />
				</div>
				<button class="publishbut" @click="PublishBut">发表</button>
				<ul class="selectListValue">
					<li v-for="(item,index) in ClassificationList" @click="selectListValueClick(index,$event)">{{item}}</li>
				</ul>
			</li>
			<li>
				<div id="context"></div>
			</li>
		</ul>
		<div class="returnUser">
			<a href="UserArticle.html">返回个人页</a>
		</div>
		<script src="../javaScript/vue.js"></script>
		<script src="../javaScript/jquery-3.5.1.min.js"></script>
		<script src="../javaScript/wangEditor.min.js"></script>
		<script>
			$(function() {
				var View_Publish_Main_Vue = new Vue({
					el: "#View_Publish_Main",
					data: {
						IsPublic: true,
						IsComment: true,
						title: "",
						Classification: -1,
						ClassificationText: "",
						ClassificationList: [],
						GetContext: function() {
							var context = editor.txt.html();
							context = context.replaceAll('<', '$T01');
							context = context.replaceAll('>', '$T02');
							return context.replaceAll('/', 'T03');
						}
					},
					methods: {
						//发表文章
						PublishBut() {
							var token = localStorage.getItem("ArticleUserId");
							if (token == null) {
								console.log("请重新登录")
								return;
							}
							if (this.Classification == -1) {
								console.log("未选择分类");
								return;
							}
							if (this.title == "" || editor.txt.text().length < 10) {
								console.log("文章格式不正确");
								return;
							}

							var thisVue = this;
							$.post("https://localhost:44356/api/Article/Publish", {
								Token: token,
								Title: thisVue.title,
								Context: thisVue.GetContext(),
								Classification: thisVue.Classification,
								IsPublic: thisVue.IsPublic ? 1 : 0,
								IsComment: thisVue.IsComment ? 1 : 0
							}, function(data) {
								console.log(data);
							})

						},
						//公开发布按钮
						IsPublicClick() {
							this.IsPublic = !this.IsPublic;
						},
						//运行评论
						IsCommentClick() {
							this.IsComment = !this.IsComment;
						},
						//分类获得焦点
						ClassificationFocus(e) {
							//渲染出拉取框
							var y = $(e.target).offset().top + 60;
							var x = $(e.target).offset().left;
							$(".selectListValue").css({
								"display": "flex",
								"top": y,
								"left": x
							});
							$(".selectListValue").animate({
								opacity: 1
							}, 200)
						},
						//分类项失去焦点
						ClassificationBlue() {
							$(".selectListValue").animate({
								opacity: 1
							}, 200,function(){
								$(".selectListValue").css("display","none");
							})
						},
						//分类项点击
						selectListValueClick(index, e) {
							this.Classification = index;
							this.ClassificationText = $(e.target).text();
						}

					}
				})

				//创建文本编辑器
				const E = window.wangEditor
				const editor = new E('#context')
				editor.create()

				var thisVue = View_Publish_Main_Vue.$data;
				//获取分类下拉框
				$.get("https://localhost:44356/api/Other/ClassificationSelect", {}, function(data) {
					console.log(data);
					if (data.statusCode == 0) {
						thisVue.ClassificationList = data.result;
					}
				})
			})
		</script>
	</body>
</html>
